<script setup>
import LightCard from "@/components/LightCard.vue";
import {Calendar, CollectionTag, EditPen, Link} from "@element-plus/icons-vue";
import Weather from "@/components/weather.vue";
import {computed, reactive} from "vue";

const today = computed(() => {
        const date = new Date();
        return date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDate() + "日";
    }
)
import {get} from "@/net";
import {ElMessage} from "element-plus";

const weather = reactive({
    location: {},
    now: {},
    hourly: [],
    success: false
})
navigator.geolocation.getCurrentPosition(position => {
    const longitude = position.coords.longitude;
    const latitude = position.coords.latitude;
    console.info(longitude);
    console.info(latitude);
    get(`/api/forum/weather?longitude=${longitude}&latitude=${latitude}`, data => {
        Object.assign(weather, data)
        weather.success = true;
    })
}, error => {
    console.info(error)
    ElMessage.warning("获取位置失败，请检查网络设置");
    get(`/api/forum/weather?longitude=113.5248&latitude=37.9026`, data => {
        Object.assign(weather, data)
        weather.success = true;
    })
}, {
    timeout: 3000,
    enableHighAccuracy: true
})
</script>
<template>
    <div style="display: flex;margin: 20px auto;gap:20px;max-width: 1200px">
        <div style="flex: 1">
            <light-card>
                <div class="create-top">
                    <el-icon style="margin-right:3px;translate: 0 2px">
                        <EditPen/>
                    </el-icon>
                    点击发表帖子.......
                </div>
            </light-card>
            <light-card style="margin-top: 10px;height: 50px">
                置顶帖子
            </light-card>
            <div style="margin-top: 10px;display: flex;flex-direction: column;gap: 10px">
                <light-card style="height: 150px" v-for="item in 10">
                    普通文章

                </light-card>
            </div>
        </div>
        <div style="width: 300px">
            <div style="position: sticky;top: 10px;">
                <light-card>
                    <div style="font-weight: bold;color: #ff011b">
                        <el-icon style="margin-right:3px;translate: 0 2px">
                            <CollectionTag/>
                        </el-icon>
                        论坛公告
                    </div>
                    <el-divider style="margin: 10px 0"></el-divider>
                    <div style="font-size: 14px;color: grey;padding: 10px">
                        <div style="font-size: 26px;margin: 10px;color: grey">
                            本论坛为个人学习交流，禁止发布违法内容，一经发现，将立即封号。
                        </div>
                    </div>
                </light-card>
                <light-card style="margin-top:10px ">
                    <div style="font-weight: bold ;color: #43beec">
                        <el-icon style="margin-right:3px;translate: 0 2px">
                            <Calendar/>
                        </el-icon>
                        天气信息
                    </div>
                    <el-divider style="margin: 10px 0"></el-divider>
                    <weather :data="weather"/>
                </light-card>
                <light-card style="margin-top:10px ">
                    <div class="info-text">
                        <div>当前日期</div>
                        <div>{{ today }}</div>
                    </div>
                    <div class="info-text">
                        <div>当前IP地址</div>
                        <div>127.0.0.1</div>
                    </div>

                </light-card>
                <div style="margin-top:10px;font-size: 15px;color: grey">
                    <el-icon>
                        <Link/>
                    </el-icon>
                    友情链接
                    <el-divider style="margin: 10px 0"></el-divider>
                </div>
                <div style="display: grid;grid-template-columns: repeat(2,1fr);grid-gap: 10px;margin-top: 10px">
                    <div class="friend-link">
                        <el-image style="height: 100%" src="https://element-plus.org/images/js-design-banner.jpg"/>
                    </div>
                    <div class="friend-link">
                        <el-image style="height: 100%" src="https://element-plus.org/images/vform-banner.png"/>
                    </div>

                </div>
            </div>
        </div>
    </div>
</template>


<style lang="less" scoped>
.info-text {
    display: flex;
    justify-content: space-between;
    color: grey;
    font-size: 15px
}

.friend-link {
    border-radius: 10px;
    overflow: hidden;
}

.create-top {
    background-color: #efefef;
    border-radius: 5px;
    height: 40px;
    color: grey;
    font-size: 14px;
    line-height: 40px;
    padding: 0 10px;
    margin: 10px;
}

.create-top:hover {
    cursor: pointer;
}
</style>